<template>
  <div>
    <swiper :carouselItems="carouselItems"></swiper>
    <div class="grid9 d-flex flex-wrap justify-content-center">
      <div class="m-3" v-for="(item, i) of homeItems" :key="i">
        <router-link :to="{name: `${item.routeName}`}" >
          <img :src="item.img" />
          <div class="">{{ item.title }}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "@/components/Swiper.vue";
import {getCarousel} from "@/api/index.js"

export default {
  data() {
    return {
      carouselItems: [],
      homeItems:[
      {
          title:"新闻资讯",
          routeName:"news_list",
          img:   require('@/assets/images/menu1.png'),
      },
      {
          title:"图片分享",
          routeName:"photo_list",
          img:   require('@/assets/images/menu2.png'),
          
      },
      {
          title:"商品购买",
          routeName:"category",
          img:   require('@/assets/images/menu3.png'),
          
      },
      {
          title:"留言反馈",
          routeName:"working",
          img:   require('@/assets/images/menu4.png'),          
      },
      {
          title:"视频专区",
          routeName:"working",
          img:   require('@/assets/images/menu5.png'),          
      },
      {
          title:"联系我们",
          routeName:"working",
          img:   require('@/assets/images/menu6.png'),          
      },
      ],
    };
  },
  created() {
    this.getCarouselItems(); //=====================================
  },
  methods: {
    async getCarouselItems() {
      try {
        let result = await getCarousel();
        if (result.code === 1) {
          this.carouselItems = result.data;          
        }else{
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("获取轮播图错误",error)
      }     
    },//===================================
  },
  components: {
    Swiper,
  },
};
</script>

<style lang="scss" scoped>
.grid9 {
  font-size: 14px;
  background-color: #fff;
  border: none;
  img {
    width: 60px;
    height: 60px;
  }
}
</style>
